<template>
  <div class="ivu-tree">
    
      <ul class="ivu-tree-children" data-old-padding-top="" data-old-padding-bottom="" style="" visible="visible" data-old-overflow="">
        <li v-for="firstNode in treeData" :key="firstNode.pkId" >
          <span :class="['ivu-tree-arrow',{'ivu-tree-arrow-open':firstNode.open}]" @click="openNode(firstNode.pkId)">
            <i class="ivu-icon ivu-icon-md-arrow-dropright"></i>
          </span> 
          <!--
          <label class="ivu-checkbox-wrapper ivu-checkbox-default">
            <span :class="['ivu-checkbox',{'ivu-checkbox-checked':firstNode.checked},{'ivu-checkbox-indeterminate':firstNode.selected}]">
              <span class="ivu-checkbox-inner"></span> 
              <input type="checkbox" class="ivu-checkbox-input">
            </span>
          </label> 
          -->
          <span style="display: inline-block; width: 100%;margin-left:-8px;">
            <span class="" ref=""><i class="ivu-icon ivu-icon-folder" style="margin-right: 8px;"></i><span>{{firstNode.name}}</span></span>
          </span> 
          <transition-group name="hide" mode="out-in">
          <ul class="ivu-tree-children" v-for="secondNode in firstNode.children" :key="secondNode.pkId" v-show="firstNode.open">
            <li>
              <span :class="['ivu-tree-arrow',{'ivu-tree-arrow-open':secondNode.open}]" @click="openNode(secondNode.pkId)">
                <i class="ivu-icon ivu-icon-md-arrow-dropright"></i> <!----></span> 
              <label class="ivu-checkbox-wrapper ivu-checkbox-default">
                <span :class="['ivu-checkbox',{'ivu-checkbox-checked':secondNode.checked},{'ivu-checkbox-indeterminate':secondNode.selected}]" @click="opClick(secondNode.pkId)">
                  <span class="ivu-checkbox-inner"></span> <input type="checkbox" class="ivu-checkbox-input">
                </span>
              </label> 
              <span style="display: inline-block; width: 100%;margin-left:-10px;">
                <span class="" ref=""><i class="ivu-icon ivu-icon-folder" style="margin-right: 8px;"></i>
                  <span>{{secondNode.name}}</span>
                </span>
              </span>
              <transition-group name="hide" mode="out-in">
              <ul class="ivu-tree-children" v-for="thirdNode in secondNode.children" :key="thirdNode.pkId" v-show="secondNode.open">
                <li><span :class="['ivu-tree-arrow',{'ivu-tree-arrow-open':thirdNode.open}]" @click="openNode(thirdNode.pkId)"><i class="ivu-icon ivu-icon-md-arrow-dropright"></i> <!----></span> 
                  <label class="ivu-checkbox-wrapper ivu-checkbox-wrapper-checked ivu-checkbox-default">
                    <span  :class="['ivu-checkbox',{'ivu-checkbox-checked':thirdNode.checked},{'ivu-checkbox-indeterminate':thirdNode.selected}]" @click="opClick(thirdNode.pkId)">
                      <span class="ivu-checkbox-inner"></span> <input type="checkbox" class="ivu-checkbox-input">
                    </span> 
                  </label> 
                  <span style="display: inline-block; width: 100%;margin-left:-10px;">
                    <span class="" ref="">
                      <i class="ivu-icon ivu-icon-folder" style="margin-right: 8px;"></i>
                      <span>{{thirdNode.name}}</span>
                    </span>
                  </span> 
                  <transition name="hide" mode="out-in">
                  <ul class="ivu-tree-children" style="display: flex;flex-wrap: wrap" v-show="thirdNode.open" :key="thirdNode.pkId">
                    <li v-for="fourthNode in thirdNode.children" :key="fourthNode.pkId" style="">
                      <span class="ivu-tree-arrow"></span> 
                      <label class="ivu-checkbox-wrapper ivu-checkbox-wrapper-checked ivu-checkbox-default">
                        <span :class="['ivu-checkbox',{'ivu-checkbox-checked':fourthNode.checked}]" @click="opClick(fourthNode.pkId)"><span class="ivu-checkbox-inner"></span> <input type="checkbox" class="ivu-checkbox-input"></span> <!---->
                      </label> 
                      <span style="display: inline-block;margin-left:-8px;"><span class="op" ref="op">
                        <i class="ivu-icon ivu-icon-folder" style="margin-right: 8px;"></i><span>{{fourthNode.name}}</span></span>
                      </span> 
                    </li>
                  </ul>

                  </transition>
                </li>
              </ul>
              </transition-group>
            </li>
          </ul>
          </transition-group>
        </li>
      </ul>
  </div>
</template>
<script>
export default {
  data(){
    return{
      roleId:'',
      treeData:[],
      selectedId:[]
    }
  },
  //props:['roleId'],
  created(){
    //alert(this.roleId)
  },
  methods:{
    getSelectedNodes(){
      return this.getSelNode(this.treeData)
      //return this.selectedId
    },
    getSelNode(list){
      list.forEach(item=>{
        if(item.checked || item.selected){
          this.selectedId.push(item.pkId)
        }
        // if(!list.children || ){

        // }
        if(item.children && item.children.length > 0){
          return this.getSelNode(item.children)
          //return this.selectedId
        }
      })
      return this.selectedId
    },
    openNode(pkId){
      this.findNode(this.treeData,pkId)
    },
    findNode(list,pkId){
      console.log(pkId)
      list.forEach(item=>{
        if(item.pkId == pkId){
          item.open = !item.open
          console.log(item.name,item.open)
        } else {
          this.findNode(item.children,pkId)
        }
      })
    },
    opClick(pkId){
      //this.treeData[0].children[0].children[0].checked = false
      
      this.changeCheck(this.treeData,pkId)
    },
    changeCheck(list,pkId){
      //1.自身节点的状态处理  2 子节点的状态处理
      this.updateNode(list,pkId)
      //3.父节点的状态处理 全选或半选
      this.selectNode(this.treeData)
      this.selectNode(this.treeData)
      setTimeout(()=>{
        console.log('tree',this.treeData)
      },2000)
    },
    updateNode(list,pkId){
      list.forEach(item=>{
        if(item.pkId == pkId){
          //console.log(item.name)
          //1.自身节点的状态处理
          if(item.checked){
            item.checked = false
            item.selected = false
          } else {
            item.checked = true
            item.selected = false
          }
          //2.子节点的状态处理
          if(item.children.length>0){
            //全部子节点的取消或选中
            this.childrenCheck(item.children,item.checked)
          }
        } else if(item.children.length>0){
          //递归查找节点
          this.updateNode(item.children,pkId)
        }
      })
    },
    selectNode(list){
      var flag = false
      list.forEach(item=>{
        if(item.children.length > 0){
          //不处理本级与下级
          let notAllChecked = this.judgeNode(item.children)
          if(notAllChecked == '0'){//一个都没选 不做处理
            //item.checked = false
            //item.selected = false
          } else if(notAllChecked == '1'){//半选
            item.checked = false
            item.selected = true
          } else if(notAllChecked == '2'){//全选
            item.checked = true
            item.selected = false
          }
          this.selectNode(item.children)
         
        }
      })
    },
    judgeNode(list){
      var notCheck
      var selCount = 0
      var noSelCount = 0
      list.forEach(item=>{ //直接子级
        if(!item.checked && !item.selected){
          //console.log('未选中',item.name)
          notCheck = "1"
          noSelCount ++
        }  else {
          selCount ++
        }
        if(item.children && item.children.length > 0){
          item.children.forEach(obj=>{

          })
        }
     })
     if(selCount == list.length){
       notCheck = "2"
     }
     if(noSelCount == list.length){
       notCheck = "0"
     }
     return notCheck
     /*
     if(list.some(item=>{
       console.log('未选中',item.name)
       return !item.checked
     })){
       return true
     } else if(list.children && list.children.length > 0){
       judgeNode(list.children)
     }
     */
 
    },
    //子节点全部取消或选中
    childrenCheck(list,isChecked){
      list.forEach(item=>{
        item.checked = isChecked
        if(item.children.length>0){
          this.childrenCheck(item.children,isChecked)
        }
      })
    },
    setRoleId(roleId){
      this.treeData = []
      this.selectedId = []
      this.roleId = roleId

      this.getTreeData()
      //alert(this.roleId)
    },
    getTreeData(){
      this.$post('sys/roleAuthorizeList',{'roleId':this.roleId})
        .then(result=>{
            var data = eval('('+result.data+')')
            console.log(data)
            this.treeData = data
            this.selectNode(this.treeData)
            this.selectNode(this.treeData)
        })
    }
  }
}
</script>
<style scoped>
/*2.自定义 两组样式，来控制 transition 内部的元素实现动画*/
/* v-enter [是一个时间段]是进入之前，元素的起始状态，此时还没有开始进入*/
/*v-leave-to  [是一个时间段]是动画离开之后，离开的终止状态，此时动画已经结束*/
.v-enter,.v-leave-to{
  transition: all 1.4s ease;
  /* transform: translateX(150px); */
}
/* v-enter-active 入场动画的时间段*/
/*v-leave-active 离场动画的时间段*/
.v-enter-active, .v-leave-active{
  opacity: 0;
  transform: translateY(-100px);
}
.hide-enter-active,.hide-leave-active{
  transition: all 0.2s linear;
}
.hide-enter, .hide-leave-to {
  opacity: 0;
}
</style>


